<template>
  <view class="notes-wrapper">
    <view class="goNote v" @click="toNote">
      <image class="icon" src="/static/icons/note.svg"/>
      <text>{{note || '写点备注...'}}</text>
    </view>
    <view class="create_date v">
      <Icon class="icon" iconName="date"/>
      <picker mode="date" v-if="dateValue" :value="dateValue" :start="starts" :end="ends" @change="bindDateChange">
        <view class="dateIpt">{{dateValue}}</view>
      </picker>
    </view>
    <MaskDiv v-if="styleInput" :note="note" @closeMask="closeMask" @sureText="sureText"/>
  </view>
</template>

<script>

import { mapState } from 'vuex'
import MaskDiv from '@/main/Home/childComps/Money/MaskDiv'

export default {
  props: {
    note: String,
    createdAt: String
  },
  data() {
    return {
      styleInput: false
    }
  },
  computed: {
    ...mapState(['start', 'end']),
    ends() {
      const d = this.end
      return `${d.getFullYear()}-${d.getMonth() > 8 ? (d.getMonth() + 1) : `0${d.getMonth() + 1}`}-01`
    },
    starts() {
      const d = this.start
      return `${d.getFullYear()}-${d.getMonth() > 8 ? (d.getMonth() + 1) : `0${d.getMonth() + 1}`}-01`
    },
    dateValue() {
      const d = new Date(this.createdAt)
      const year = d.getFullYear()
      const month = d.getMonth()
      const day = d.getDate()
      return `${year}-${month > 8 ? (month + 1) : `0${month + 1}`}-${day < 10 ? `0${day}` : day}`
    }
  },
  components: { MaskDiv },
  methods: {
    bindDateChange({ target: { value } }) {
      this.$emit('update:dateValue', new Date(value).toISOString())
    },
    toNote() {
      this.styleInput = true
    },

    closeMask(obj) {
      this.styleInput = false
    },

    sureText(note) {
      this.$emit('update:noteValue', note)
      this.styleInput = false
    }
  }
}

</script>

<style lang="scss" scoped>
  .notes-wrapper {
    padding: 8rpx 20rpx 0 20rpx;

    .icon {
      left: 5px;
      width: 28px;
      height: 28px;
    }
    .v{
      height: 72rpx;
      line-height: 72rpx;
      padding: 0 16rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      border-radius: 10px;
    }

    .goNote {
      border: none;
      margin-top: 12rpx;
      text {
        margin-left: 4px;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        max-width: 400rpx;
      }
    }

    .create_date {
      margin-top: 10rpx;
      input,.dateIpt {
        margin-left: 8rpx;
      }
    }

  }
</style>
